<!-- 添加或修改角色配置对话框 -->
<template>
    <div>
        <el-drawer title="数据权限" v-model="drawerShow" direction="rtl" :before-close="handleClose" size="35%"
            :close-on-click-modal="false">
            <el-form ref="roleRef" :model="form" :rules="formRules" label-width="100px">
                <el-form :model="form" label-width="80px">
                    <el-form-item label="角色名称">
                    <el-input v-model="form.roleName" :disabled="true" />
                    </el-form-item>
                    <el-form-item label="权限字符">
                    <el-input v-model="form.roleKey" :disabled="true" />
                    </el-form-item>
                    <!-- <el-radio-group v-model="form.dataScope" class="ml-4"> -->
                        <!-- <el-radio label="1" size="large">集团</el-radio> -->
                        <!-- <el-radio label="2" size="large">指定巴体</el-radio> -->
                        <!-- <el-radio label="3" size="large">指定部门</el-radio> -->
                        <!-- <el-radio label="4" size="large">指定员工</el-radio> -->
                        <!-- <el-radio label="5" size="large">仅自己</el-radio> -->
                    <!-- </el-radio-group> -->
                    <el-form-item label="权限范围">
                        <el-select v-model="form.dataScope" @change="dataScopeSelectChange">
                            <el-option v-for="item in dataScopeOptions" :key="item.value" :label="item.label" :value="item.value" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="数据权限" v-if="form.dataScope == '3'">
                        <el-checkbox v-model="deptExpand" @change="handleCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
                        <el-checkbox v-model="deptNodeAll" @change="handleCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
                        <!-- <el-checkbox v-model="form.deptCheckStrictly" @change="handleCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox> -->
                        <el-tree class="tree-border" :data="deptOptions" show-checkbox default-expand-all ref="deptRef" 
                            node-key="id" :check-strictly="!form.deptCheckStrictly" empty-text="加载中，请稍候" 
                            :props="{ label: 'label', children: 'children' }" ></el-tree>
                    </el-form-item>
                </el-form>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
<script setup>
    import { ref, watch } from "vue"
    import { deptTreeSelect } from "@/api/system/role";
    const props = defineProps(['show', 'defaultValue']);
    const emit = defineEmits(['update:show', 'submit']);
    const { proxy } = getCurrentInstance();
    const drawerShow = ref(false);
    const form = ref({
        roleName: '',
        roleKey: '',
        dataScope: '',
    });
    const formRules = ref({
        roleName: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
        roleKey: [{ required: true, message: "请输入权限字符", trigger: "blur" }],
    });
    const deptOptions = ref([]); // 部门树
    const deptRef = ref(null);
    /** 数据范围选项*/
    const dataScopeOptions = ref([
        { value: "1", label: "全集团" },
        { value: "2", label: "指定巴体" },
        { value: "3", label: "指定部门" },
        { value: "4", label: "指定员工" },
        { value: "5", label: "仅自己" }
    ]);
    watch(() => props.show, () => {
        drawerShow.value = props.show;
        if(drawerShow.value){
            if(props.defaultValue.roleId) {
                setDefaultFormData(props.defaultValue);
            }
        }
    }, { deep: true });
    const dataScopeSelectChange = (value) => {
        switch(value){
            case '1' : break;
            case '2' : break;
            case '3' : 
                const deptTreeSelect = getDeptTree(props.defaultValue.roleId);
                nextTick(() => {
                    deptTreeSelect.then(res => {
                        nextTick(() => {
                            if (deptRef.value) {
                                deptRef.value.setCheckedKeys(res.checkedKeys);
                            }
                        });
                    });
                });
                break;
            case '4' : break;
            case '5' : break;
            default: break;
        }
    };
    // 获取部门树
    const getDeptTree = (roleId) => {
        return deptTreeSelect(roleId).then(response => {
            deptOptions.value = response.depts;
            return response;
        });
    }
    /** 树权限（展开/折叠）*/
    const handleCheckedTreeExpand = (value, type) => {
        if(type == 'dept'){
            let treeList = deptOptions.value;
            for (let i = 0; i < treeList.length; i++) {
                deptRef.value.store.nodesMap[treeList[i].id].expanded = value;
            }
        }
    }
    /** 树权限（全选/全不选） */
    const handleCheckedTreeNodeAll = (value, type) => {
        if(type == 'dept'){
            deptRef.value.setCheckedNodes(value ? deptOptions.value : []);
        }
    }
    /** 所有部门节点数据 */
    const getDeptAllCheckedKeys = () => {
        // 目前被选中的部门节点
        let checkedKeys = deptRef.value.getCheckedKeys();
        // 半选中的部门节点
        let halfCheckedKeys = deptRef.value.getHalfCheckedKeys();
        checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
        return checkedKeys;
    }
    const setDefaultFormData = (defaultValue) => {
        for(const key in form.value){
            form.value[key] = defaultValue[key];
        }
        const dataScope = defaultValue.dataScope;
        switch(dataScope){
            case '1' : break;
            case '2' : break;
            case '3' : getDeptTree(props.defaultValue.roleId);break;
            case '4' : break;
            case '5' : break;
            default: break;
        }
    };
    const submitForm = () => {
        proxy.$refs["roleRef"].validate(valid => {
            if (valid) {
                form.value.deptIds = getDeptAllCheckedKeys();
                emit('submit', form);
                handleClose();
            }
        });
    };
    const cancel = () => {
        handleClose();
    };
    const handleClose = () => {
        drawerShow.value = false;
        emit('update:show', false);
    };
    const resetForm = () => {
        form.value = {
            roleName: '',
            roleKey: '',
            dataScope: '',
        };
        proxy.resetForm("roleRef");
    }
</script>